<template>
  <view
    v-show="show"
    class="con"
  >
    <swiper
      :current="index"
      class="con"
      @change="change"
      :indicator-dots="true"
    >
      <swiper-item
        v-for="(item, index) in emojiList"
        :key="index"
      >
        <view class="list-box">
          <view
            class="list"
            v-for="(itemc, indexc) in item"
            :key="indexc"
            @click="select(itemc)"
          >
            {{ itemc }}
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view
      class="del"
      @tap="delMsg()"
    >
      <image
        class="del-img"
        src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250401/230293fa515216e304ebc61c6a552af9.png"
        mode="widthFix"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      chunkSize: 58,
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: [
        "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇", "🙂", "🙃", "😉", "😌", "😍", "🥰",
        "😘", "😗", "😙", "😚", "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", "🤩", "🥳", "😏",
        "😒", "😞", "😔", "😟", "😕", "🙁", "😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡",
        "🤬", "🤯", "😳", "🥵", "🥶", "😱", "😨", "😰", "😥", "😓", "🤗", "🤔", "🤭", "🤫", "🤥", "😶",
        "😐", "😑", "😬", "🙄", "😯", "😦", "😧", "😮", "😲", "😴", "🤤", "😪", "😵", "🤐", "🥴", "🤢",
        "🤮", "🤧", "😷", "🤒", "🤕", "🤑", "🤠", "😈", "👿", "👹", "👺", "🤡", "💩", "👻", "💀", "☠",
        "👽", "👾", "🤖", "🎃", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾"
      ]
    }
  },
  computed: {
    emojiList () {
      let result = [];
      for (let i = 0; i < this.data.length; i += this.chunkSize) {
        let chunk = this.data.slice(i, i + this.chunkSize);
        result.push(chunk);
      }
      return result;
    },
  },
  methods: {
    select (item) {
      this.$emit('change', item); // 确保正确传递选中的表情字符
    },
    change (e) {
      this.index = e.detail.current;
    },
    delMsg () {
      this.$emit('delMsg');
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.uni-view) {
  position: inherit;
}
.con {
  height: 490rpx;
  background: #ededed;
  /* position: relative; */
}
.text-style {
  color: #f3f3f4;
  font-size: 28rpx;
}

.list-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row !important;
}

.list {
  height: 75rpx;
  width: 10%;
  text-align: center;
  line-height: 75rpx;
  font-size: 50rpx;
}

.del {
  width: 120rpx;
  height: 75rpx;
  background: #fff;
  position: absolute;
  right: 10rpx;
  bottom: 40rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.del-img {
  width: 60rpx;
}
</style>